<template>
  <view class="page-container">
    <view class="avatar-area">
      <image 
        :src="iconFilePath" 
        class="avatar"
        mode="aspectFill"
        @click="updateImage()"
      ></image>
    </view>
    <view class="btn-area">
      <button class="func-btn" @click="chooseImage">选择图片显示</button>
      <button class="func-btn" @click="previewImage" :disabled="!iconFilePath">预览图片</button>
      <button class="func-btn" @click="getImageInfo" :disabled="!iconFilePath">获取图片信息</button>
    </view>
    <view class="btn-area">
      <button class="func-btn" @click="downloadNetImage">下载网络图片并显示</button>
      <image 
        :src="netImagePath" 
        class="net-image"
        mode="widthFix"
        v-if="netImagePath"
      ></image>
    </view>
    <view class="weather-area">
      <button class="func-btn" @click="getWeather">获取明天天气预报</button>
      <view class="weather-info" v-if="tomorrowWeather">
        <view>日期：{{ tomorrowWeather.date }}</view>
        <view>星期：{{ tomorrowWeather.week }}</view>
        <view>最高温：{{ tomorrowWeather.high }}</view>
        <view>最低温：{{ tomorrowWeather.low }}</view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      iconFilePath: "/static/xiaoxin.jpeg",
      tomorrowWeather: null,
      netImagePath: "" 
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sourceType: ['album'],
        success: (res) => {
          this.iconFilePath = res.tempFilePaths[0];
        }
      });
    },
    previewImage() {
      uni.previewImage({
        urls: [this.iconFilePath]
      });
    },
    getImageInfo() {
      uni.getImageInfo({
        src: this.iconFilePath,
        success: (image) => {
          uni.showModal({
            title: "图片信息",
            content: `宽度：${image.width}px\n高度：${image.height}px`,
            showCancel: false
          });
        }
      });
    },
    updateImage() {
      this.chooseImage();
    },
    getWeather() {
      uni.showLoading({ title: '获取中...' });
      uni.request({
        url: 'http://t.weather.sojson.com/api/weather/city/101230501',
        success: (res) => {
          try {
            if (res.data?.status === 200 && res.data.data?.forecast?.length >= 2) {
              const tomorrowData = res.data.data.forecast[1];
              let date = tomorrowData.ymd || tomorrowData.date;
              if (date.includes('月') && !date.includes('-')) {
                date = new Date().getFullYear() + '-' + date.replace('月', '-').replace('日', '');
              }
              this.tomorrowWeather = {
                date: date,
                week: tomorrowData.week || '未知',
                high: tomorrowData.high || '未知',
                low: tomorrowData.low || '未知'
              };
            } else {
              uni.showToast({ title: '天气数据异常', icon: 'none' });
            }
          } catch (err) {
            uni.showToast({ title: '数据解析失败', icon: 'none' });
          }
        },
        fail: (eMsg) => {
          console.log("请求失败：", eMsg);
          uni.showToast({ title: '网络请求失败', icon: 'none' });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
    },
    downloadNetImage() {
      const imageUrl = "https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg";
      uni.downloadFile({
        url: imageUrl,
        onProgressUpdate: (res) => {
          console.log(`下载进度：${res.progress}%`); 
          console.log(`已下载：${res.totalBytesWritten / 1024}KB / 总大小：${res.totalBytesExpectedToWrite / 1024}KB`);
        },
        success: (downloadRes) => {
          if (downloadRes.statusCode === 200) {
            this.netImagePath = downloadRes.tempFilePath;
            console.log("图片下载完成，临时路径：", this.netImagePath);
          }
        },
        fail: (err) => {
          console.error("图片下载失败：", err);
          uni.showToast({ title: '图片下载失败', icon: 'none' });
        }
      });
    }
  }
};
</script>
<style >
.page-container {
  background-color: white;
 padding-top: 70px;
}
.back-btn {
  font-size: 40rpx;
  margin-right: 20rpx;
}
.avatar-area {
  display: flex;
  justify-content: center;
  padding: 80rpx 0;
}
.avatar {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  border: 2px solid #ddd;
}
.btn-area {
  padding: 0 30rpx;
  margin-bottom: 20rpx;
}
.func-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  font-size: 33rpx;
  background-color: #f5f5f5;
}
.func-btn:disabled {
  color: #999;
  background-color: #f9f9f9;
}
.weather-area {
  padding: 0 30rpx;
  margin-top: 30rpx;
}
.weather-info {
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-top: 10rpx;
  font-size: 32rpx;
  line-height: 50rpx;
}
.net-image {
  width: 100%;
  margin-top: 10rpx;
  border-radius: 10rpx;
}
</style>